<template>
      <el-carousel :interval="4000" type="card" style="margin-top: 10px; background-color: #f7efed" height="350px">
      <el-carousel-item v-for="(item, index) in slideItems" :key="index">
        <div class="carousel-item-container">
          <el-image :src="item.image" alt="" />
          <h3 class="carousel-item-title">{{ item.title }}</h3>
        </div>
      </el-carousel-item>
    </el-carousel>
</template>

<script>
export default {
    data(){
        return{
            slideItems: [
        {
          image:
            "https://img0.baidu.com/it/u=4229887953,3204451166&fm=253&fmt=auto&app=138&f=JPEG?w=658&h=348",
        },
        {
          image:
            "https://img0.baidu.com/it/u=231492585,2539311224&fm=253&fmt=auto&app=138&f=JPEG?w=748&h=412",
        },
        {
          image:
            "https://img0.baidu.com/it/u=127652889,1468968470&fm=253&fmt=auto&app=138&f=JPEG?w=748&h=500",
        },
        {
          image:
            "https://img0.baidu.com/it/u=1157650359,3311153043&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
        },
        {
          image:
            "https://img2.baidu.com/it/u=1288425279,3115652321&fm=253&fmt=auto&app=138&f=JPEG?w=913&h=500",
        },
        {
          image:
            "https://img1.baidu.com/it/u=1247255899,3456197574&fm=253&fmt=auto?w=1200&h=800",
        },
      ],
        }
    }
}
</script>

<style scoped>
.el-carousel__item {
  background-color: transparent;
  border: none;
  box-shadow: none;
}

.carousel-item-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: transparent;
}

.carousel-item-title {
  color: #475669;
  opacity: 0.75;
  line-height: 50px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) .carousel-item-title {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) .carousel-item-title {
  background-color: #d3dce6;
}

</style>